<template>
	<view class="page">
		<scroll-view show-scrollbar="true" scroll-y="true" style="height:90vh" @scrolltolower="loadMore">
			<view :style="{'filter':(status===2?'grayscale(100%)':'')}" class="stamp-coupon"
				v-for="(item,index) in usercoupon" :key="index">
				<view class="stamp-left">
					<view class="stp1">
						<text>{{item.coupon.discount?item.coupon.discount:(parseFloat(item.coupon.reduceAmount) * 100)}}</text>
						$
					</view>
					<view v-if="item.coupon.discount" class="stp">{{item.coupon.name}}</view>
				</view>
				<view class="content stamp-right">
					<view class="stamp-right-type">
						<text class="itemtiel">{{item.coupon.type=="reduce"?"折扣劵":"满减劵"}}</text>
						<text class="discount">{{item.coupon.name}}</text>
					</view>
					<view class="spacer">

					</view>
					<view class="stamp-right-date">
						<view>到期时间:{{ item.coupon.expiryDate.slice(0, 10) }}</view>
						<view class="">
							<u-button @click="useCoupon(item.couponId)"
							:disabled="item.status=='issued'?true:false" shape="circle"	size="mini" type="warning">{{item.status=='unissued'?'立即领取':'已领取'}}</u-button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				current: 1,
				size: 10,
				status: 0,
				loadingMore: false,
				usercoupon: [],
				totalPage: 0
			};
		},
		created() {
			this.loadData()
		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			}
		},
		methods: {

			async loadMore() {
				console.log('kkkkk');
				// 如果当前页数小于总页数，则加载下一页数据
				if (this.current < this.totalPage) {
					this.current++;
					this.loadingMore = true;
					await this.loadData();
				}
			},
			async useCoupon(val) {

				const param = {
					couponId: Number(val),
					userId: Number(this.userId)
				}
				const res = await this.$request.post('/system/coupon/exchange', param)
				console.log(res);
				if (res.code === 200) {
					this.usercoupon.forEach(item => {
						if (item.couponId === val) {
							item.status = 'issued';
						}
					});
				} else {

				}
			},
			async loadData() {

				const param = {
					current: this.current,
					size: this.size,
					userId: this.userId
				}
				const res = await this.$request.get('/system/system-coupon/list', param)
				console.log(res);
				if (res.code === 200) {
					this.totalPage = res.data.list.pages;
					this.usercoupon = this.usercoupon.concat(res.data.list.records)
				} else {

				}
			}

		}
	};
</script>
<style scoped lang="scss">
	.page {
		height: 100%;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		padding: 0 0px !important;
	}

	.tab-s {
		background-color: #ffffff;

	}

	.stamp-coupon {
		width: 92vw;
		height: 100px;
		background-image:
			radial-gradient(circle at 100px top, #f0f0f0, #f0f0f0 7px, transparent 8px),
			radial-gradient(circle at 100px bottom, #f0f0f0, #f0f0f0 7px, transparent 8px);
		background-color: #fedaa9;
		margin: 0 auto;
		border-radius: 10px;

		display: flex;
		justify-content: start;
		margin-top: 1rem;
		position: relative;

		.stamp-left {
			width: calc(100% / 3.5);
			background-color: red;
			height: 100%;

			text-align: center;
			color: #f0f0f0;
			position: relative;
			background: linear-gradient(98deg, #ff0000, #ff5500);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.stp1 {
				text {
					font-size: 2rem;
				}
			}

			.stp {
				font-size: 0.8rem;
			}
		}

		.stamp-right {
			width: 71%;
			height: 100%;
			border-radius: 10px;
			position: relative;

			.spacer {
				flex-grow: 1;
			}

			&-date {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				margin-bottom: 0.5rem;
				width: 90%;
				font-size: 0.3rem;
			}

			&-type {
				color: white;
				display: flex;
				margin-left: 1rem;
				margin-top: 0.5rem;
				justify-content: left;
				align-items: center;

				.itemtiel {
					border-radius: 0.2rem;
					width: 3rem;
					height: 1.1rem;
					font-size: 0.5rem;
					padding: 0.1rem;
					line-height: 1.2rem;
					text-align: center;
					background-color: red;
				}
			}
		}

		.line {
			position: absolute;
			top: 7%;
			transform: translate(-8%);
			left: 28%;
			/* 线条水平居中 */
			width: 2px;
			/* 线条的宽度 */
			height: 90%;
			/* 线条的高度，与容器高度相同 */
			background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, transparent 40%);
			/* 定义线条纹理 */
			background-size: 100% 11px;
			/* 纹理大小，可以调整线条之间的间距 */
			background-repeat: repeat-y;
			/* 横向重复填充 */
		}

	}

	.content {
		display: flex;
		flex-direction: column;

	}

	.discount {
		font-size: 1rem;
		color: #323232;
		font-weight: bold;
		margin-left: 1rem;
	}

	.label {
		font-size: 16px;
		color: #ff0000;
		margin-top: 5px;
	}
</style>